<template>
  <div class="container">
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <transition name="slide">
      <router-view v-if="!$route.meta.keepAlive"></router-view>
    </transition>
    <router-view name="footer"></router-view>
  </div>
</template>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
html,
body,
.container {
  width: 100%;
  height: 100%;
}
html {
  font-size: 26.6666666666vw; // 100 / 375 * 100vw  = 26.6666666666vw
}
 @media all and (orientation:landscape){
   html{
     font-size: 100px;
   }
   body{
     font-size: 16px;
   };
 }
body {
  font-size: 16px;
}
.container {
  // max-width: 640px;
  margin: 0 auto;
  background: #f6f6f6;
  display: flex;
  flex-direction: column;
  .box {
    flex: 1;
    overflow: auto;
    display: flex;
    flex-direction: column;
    .header {
      height: 0.44rem;
      // background: #f88;
    }
    .content {
      flex: 1;
      overflow: auto;
    }
  }
  .footer{
    height: 0.6rem;
    background: #ddd;
    ul{
      display: flex;
      height: 100%;
    }
    ul li{
      flex: 1;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      span{
        font-size: 0.22rem;
      }
      .icon-gouwuche2 {
        position: relative;
        .cartNum {
          display: block;
          position: absolute;
          font-weight: bold;
          color: red;
          top:-13px;
          left: 7px;
          font-size: 0.16rem;
        }
      }
      p{
        font-size: 0.12rem;
      }
    }
    ul .router-link-active{
      color: red;
    }
  }
}
.slide-enter {
  transform: translateX(100%);
}
.slide-enter-active {
  transition: all 0.5s;
}
.slide-enter-to {
  transform: translateX(0);
}
.slide-leave {
  transform: translateX(0);
}
.slide-leave-to {
  transform: translateX(-100%);
}
</style>
